<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" th:href="@{../bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{../css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{../css/main.css}">
    <style>
        .tree li {
            list-style-type: none;
            cursor:pointer;
        }
        table tbody tr:nth-child(odd){background:#F4F4F4;}
        table tbody td:nth-child(even){color: #cc0000;}
        select,option{
           font-size: 20px;
        }
        .text{
            width: 200px;

            display: inline;
        }
        .text1{
            width: 50px;

            display: inline;
        }
    </style>
</head>

<body>


<div th:replace="../templates/nav"></div>
<div class="container-fluid">
    <div class="row">
        <div th:replace="../templates/menu"></div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 所有班级</h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form" style="float:left;" id="searchForm">
                        <div class="form-group has-feedback">
                            班级类型：  <select id="cnameSearch" name="cname" class="form-control text" >
                            <option value="" selected>请选择类型</option><option value="开发班">开发班</option><option value="测试班">测试班</option>
                            <option value="前端设计">前端设计</option><option value="UI设计">UI设计</option>
                        </select>
                            班主任：<select name="uid" id="uidSearch" class="form-control" >
                            <option value="">全部</option>
                            <option  th:each="user,sta:${userList}"  th:text="${user.uname}" th:value="${user.uid}">
                            </option>
                        </select>
                            班级编号：<input oninput = "value=value.replace(/[^\d]/g,'')" name="cid" class="form-control has-success" type="text" placeholder="请填写班级编号" id="cidSearch">

                            开班状态： <select name="cstate" id="cstateSearch" class="form-control ">
                            <option value="">全部</option>
                            <option value="未开班">未开班</option>
                            <option value="正常">正常</option>
                            <option value="已结课">已结课</option>
                        </select>
                        </div>
                        <button type="button" class="btn btn-warning" id="btnReset"><i class="glyphicon glyphicon-erase"></i> 重置</button>

                        <button type="button" class="btn btn-warning" id="btnSearch"><i class="glyphicon glyphicon-search"></i> 搜索</button>
                    </form>
<!--                    <button type="button" class="btn btn-danger" style="float:right;margin-left:10px;" id="btnDelSelected"><i class=" glyphicon glyphicon-remove"></i> 删除</button>-->
                    <button type="button" class="btn btn-primary" style="float:right;" th:onclick="|addClazz()|"><i class="glyphicon glyphicon-plus"></i> 新增</button>
                    <br>
                    <hr style="clear:both;">
                    <div class="table-responsive">
                        <form id="delForm">
                        <table class="table  table-bordered ">
                            <thead>
                            <tr>
                                <th width="50px">编号</th>
                                <th width="100px">班主任</th>
                                <th width="100px">类型</th>
                                <th width="100px">状态</th>
                                <th width="100px">开课时间</th>
                                <th width="100px">结课时间</th>
                                <th width="100px">操作</th>
                            </tr>

                            <tbody id="tbody">

                            </tbody>
                            </thead>

                            <tfoot>
                            <tr >
                                <td colspan="7" align="center">
                                    <ul class="pagination" id="byPage">

                                    </ul>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{../jquery/jquery-2.1.1.min.js}"></script>
<script th:src="@{|/jquery/jquery.md5.js|}"></script>
<script th:src="@{../bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{../script/docs.min.js}"></script>
<script th:src="@{../layer/layer.js}"></script>
<form id="UpdateClazzForm">
    <div class="modal fade" id="UpdateModal"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="UpdateModalLabei">班级修改</h4>
                </div>
                <input type="hidden" name="cid" id="cidUpdate">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="uidUpdate">&nbsp;班&nbsp;主&nbsp;任:</label>
                        <select name="uid" id="uidUpdate" class="form-control text" >

                        </select>
                    </div>

                </div>
                <div class="form-group">
                    <label for="cnameUpdate">&nbsp;&nbsp;&nbsp;&nbsp;班级名称:</label>
                    <input name="cname" id="cnameUpdate"  type="hidden">
                    <select id="cnameTypeUpdateSelect" class="form-control text" >
                        <option value="">请选择类型</option><option value="开发班">开发</option><option value="测试班">测试</option>
                        <option value="天花">天花班</option><option value="weq二连班">weq二连</option><option value="UI设计">UI设计</option>
                    </select>
                    第&nbsp;&nbsp;<input id="cnameNumberUpdateSelect" oninput = "value=value.replace(/[^\d]/g,'')" class="text1">&nbsp;&nbsp;期
                </div>

                <div class="form-group">
                    <label for="beginUpdate">&nbsp;&nbsp;&nbsp;&nbsp;开始时间:</label>
                    <input name="begin" type="date" id="beginUpdate" class="form-control text"  value="">
                </div>
                <div class="form-group">
                    <label for="endUpdate">&nbsp;&nbsp;&nbsp;&nbsp;结束时间:</label>
                    <input name="end" type="date"  id="endUpdate" class="form-control text" value="">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"  data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="UpdateBtn" >更改</button>
            </div>
        </div>
    </div>
    </div>
</form>
<form id="AddClazzForm">
    <div class="modal fade" id="AddModal"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="AddModalLabei">班级添加</h4>
                </div>
                <input type="hidden" name="cid" id="cidAdd">
                <!--        <input type="hidden" name="uidsel" id="uidsel">-->
                <div class="modal-body">
                    <div class="form-group">
                        <label for="uidAdd">&nbsp;班&nbsp;主&nbsp;任:</label>
                        <select name="uid" id="uidAdd" class="form-control text" >
                            <option value="" selected>请选择</option>
                            <option  th:each="user,sta:${userList}"  th:text="${user.uname}" th:value="${user.uid}"
                                     >
                            </option>
                        </select>
                    </div>

                </div>
                <div class="form-group">
                    <label for="cnameAdd">&nbsp;&nbsp;&nbsp;&nbsp;班级名称:</label>
                    <input name="cname" id="cnameAdd"  type="hidden">
                    <select id="cnameTypeAppSelect" class="form-control text" >
                        <option value="" id="selectedType" selected>请选择类型</option><option value="开发班">开发班</option><option value="测试班">测试班</option>
                        <option value="前端设计">前端设计</option><option value="UI设计">UI设计</option>
                    </select>
                    第&nbsp;&nbsp;<input id="cnameNumberAppSelect" oninput = "value=value.replace(/[^\d]/g,'')" class="text1">&nbsp;&nbsp;期


                </div>
                <div class="form-group">
                    <input type="hidden" name="cstate" id="cstateAdd" value="未开班">

                </div>
                <div class="form-group">
                    <label for="beginAdd">&nbsp;&nbsp;&nbsp;&nbsp;开始时间:</label>
                    <input name="begin" type="date" id="beginAdd" class="form-control text" value="">
                </div>
                <div class="form-group">
                    <label for="endAdd">&nbsp;&nbsp;&nbsp;&nbsp;结束时间:</label>
                    <input name="end" type="date"  id="endAdd" class="form-control text" value="">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"  data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="AddBtn" >添加</button>
            </div>
        </div>
    </div>
    </div>
</form>
<script>
    function  permission(cid,uid){
        $("#cidUpdate").val(cid)
        $("#UpdateModal").modal("show")
        $.ajax({
            url:"/clazz/toUpdateByCidDo",
            type:"post",
            data:{"cid":cid},
            success:function (data){
                var dataClazz=data.clazz;
                var dataUserList=data.userList;
                var typeStr=dataClazz.cname.substring(0,dataClazz.cname.indexOf("第"))
                var numberStr=dataClazz.cname.substring(dataClazz.cname.indexOf("第")+1,dataClazz.cname.indexOf("期"))

                $("#cnameTypeUpdateSelect").val(typeStr);
                $("#cnameNumberUpdateSelect").val(numberStr);

                var str="";

                $("#cstateUpdate").val(dataClazz.cstate);
                $("#beginUpdate").val(dataClazz.begin);
                $("#endUpdate").val(dataClazz.end);
                $.each(dataUserList,function (index,user){
                    if(user.uid==dataClazz.uid){
                    str+="<option value='"+user.uid+"' selected>"+user.uname+"</option>"}
                    else {
                    str+="<option value='"+user.uid+"' >"+user.uname+"</option>"
                    }
                });
                $("#uidUpdate").html(str);
            }
        })
    }
    $("#UpdateBtn").click(function(){
        var cnameStr=$("#cnameTypeUpdateSelect").val()+"第"+$("#cnameNumberUpdateSelect").val()+"期";
        $("#cnameUpdate").val(cnameStr)

        var uidStr= $("#uidUpdate").val();

        if(uidStr==null||uidStr==""){ layer.msg("班主任不能为空", {time: 1000, icon: 5, shift: 6}, function () {
        });return;}
        var nameStr= $("#cnameUpdate").val();
        if(nameStr==null||nameStr==""){ layer.msg("班级名称不能为空", {time: 1000, icon: 5, shift: 6}, function () {
        });return;}

        var todayStr=new Date();
        var yearStr=todayStr.getFullYear();
        var monthStr=todayStr.getMonth()+1;
        var dateStr=todayStr.getDate();
        todayStr=yearStr+"-"+monthStr+"-"+dateStr;

       var beginStr=$("#beginUpdate").val();
        if(beginStr==null||beginStr==""){ layer.msg("开始时间不能为空", {time: 1000, icon: 5, shift: 6}, function () {
        });return;}
        var endStr=$("#endUpdate").val();
        if(endStr==null||endStr==""){ layer.msg("结束时间不能为空", {time: 1000, icon: 5, shift: 6}, function () {
        });return;}


        var f=todayStr>beginStr;
        if(f){ layer.msg("开始日期不能在今天之前", {time: 1000, icon: 5, shift: 6}, function () {
        }); return;}
            var f=beginStr>endStr;
        if(f){ layer.msg("开始日期不能在结束日期之前", {time: 1000, icon: 5, shift: 6}, function () {
        });return;}
        $.ajax({
            url:"/clazz/updateByCidDo",
            type:"post",
            data:$("#UpdateClazzForm").serialize(),
            success:function (data){
                if(data.message!=null){
                    layer.msg(data.message+"  修改失败", {time: 2000, icon: 5}, function () {
                        return;
                    });
                }else {
                if (data.result == true) {
                    layer.msg("修改成功", {time: 1000, icon: 4}, function () {
                        $("#UpdateModal").modal("hide");
                        $("#UpdateClazzForm")[0].reset();
                        showList(1)
                    });
                } else {
                    layer.msg("修改失败", {time: 2000, icon: 5}, function () {

                    });
                }
                }
            }
        })
    })
    function  addClazz() {

        $("#AddModal").modal("show")
    }


    $("#AddBtn").click(function (){
        var cnameStr=$("#cnameTypeAppSelect").val()+"第"+$("#cnameNumberAppSelect").val()+"期";
        $("#cnameAdd").val(cnameStr)

        var uidStr= $("#uidAdd").val();

        if(uidStr==null||uidStr==""){ layer.msg("班主任不能为空", {time: 1000, icon: 5, shift: 6}, function () {
        });return;}
        var nameStr= $("#cnameAdd").val();
        if(nameStr==null||nameStr==""){ layer.msg("班级名称不能为空", {time: 1000, icon: 5, shift: 6}, function () {
        });return;}



        var todayStr=new Date();
        var yearStr=todayStr.getFullYear();
        var monthStr=todayStr.getMonth()+1;
        var dateStr=todayStr.getDate();
        todayStr=yearStr+"-"+monthStr+"-"+dateStr;

        var beginStr=$("#beginAdd").val();
        if(beginStr==null||beginStr==""){ layer.msg("开始时间不能为空", {time: 1000, icon: 5, shift: 6}, function () {
        });return;}
        var endStr=$("#endAdd").val();
        if(endStr==null||endStr==""){ layer.msg("结束时间不能为空", {time: 1000, icon: 5, shift: 6}, function () {
        });return;}

        var f=todayStr>beginStr;
        if(f){ layer.msg("开始时间不能在今天之前", {time: 1000, icon: 5, shift: 6}, function () {
        });return;}
            var f=beginStr>endStr;
        if(f){ layer.msg("开始时间不能在结束时间之前", {time: 1000, icon: 5, shift: 6}, function () {
            }); return;}

        $.ajax({
            url: "/clazz/addClazzDo",
            type: "post",
            data: $("#AddClazzForm").serialize(),
            success: function (data) {
                if(data.message!=null){
                    layer.msg(data.message+"  添加失败", {time: 2000, icon: 5}, function () {
                            return;
                    });
                }else {
                if (data.result == true) {
                    layer.msg("添加成功", {time: 1000, icon: 4}, function () {

                        $("#AddModal").modal("hide")
                        $("#AddClazzForm")[0].reset();
                        showList(1)
                    });
                } else {
                    layer.msg("添加失败", {time: 2000, icon: 5}, function () {
                        return;
                    });
                }
                }
            }
        })
    });

    function deleteClassByCid(cid){
        layer.confirm('确定删除该班及该班所有学生吗？', {
            btn: ['确定','取消']     //按钮
        }, function(){           //点击确定访问后台
            // 这里写自己的ajax代码
            $.ajax({
                url:"/clazz/deleteClazzByCidDo",
                type:"post",
                data:{"cid":cid},
                success:function (date){
                    if(date.result==true){
                        //在后台返回结果为成功的函数里面写上下面代码

                        layer.msg('已删除', {icon: 1});
                        showList(1)
                    } if(date.result==false){
                        layer.msg('删除失败', {icon: 1});
                    }

                }
            })
            //在后台返回结果为失败的函数里面写上下面代码
        }, function(){   	//点击取消则中断操作
            layer.msg('已取消', {
                time: 1000, //2s后自动关闭
            });
        });
    }

</script>
<script type="text/javascript">
    $(function () {
        $(".list-group-item").click(function(){
            if ( $(this).find("ul") ) {
                $(this).toggleClass("tree-closed");
                if ( $(this).hasClass("tree-closed") ) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
        showList(1)


    });




    $("#btnSearch").click(
        function (){
            showList(1)
        })
    $("#btnReset").click(
            function (){
                $("#searchForm")[0].reset()
                    $("#cnameSearch").val("")
                    $("#uidSearch").val("")
                    $("#cnameSearch").val("")
                    $("#cstateSearch").val("")
                showList(1)
            })

    function showList(currentPage) {
        $.ajax({
            url:"/clazz/mclazzListDo",
            type:"post",
            data:{"currentPage":currentPage,"cname":$("#cnameSearch").val(),"cid":$("#cidSearch").val(),"uid":$("#uidSearch").val(),"cstate":$("#cstateSearch").val()},
            success:function (data) {
                if (data.result){
                    var str="";
                    $.each(data.mclazzList, function (index,clazz) {
                        str += "<tr>";
                        str += "<td>" + clazz.cid + "</td>";
                        str += "<td>" + clazz.user.uname + "</td>";
                        str += "<td>" + clazz.cname + "</td>";
                        str += "<td>" + clazz.cstate + "</td>";
                        str += "<td>" + clazz.begin + "</td>";
                        str += "<td>" + clazz.end + "</td>";
                        str += "<td>";
                        // str += '<button type="button" class="btn btn-success btn-xs" onclick="assignRole(' + clazz.cid+ ')"><i class=" glyphicon glyphicon-check"></i></button>';
                        str += '<button type="button"  '+(clazz.cstate!="已结课"?'':'disabled')+' title="修改班级" class="btn btn-primary btn-xs" onclick="permission(' + clazz.cid+','+clazz.uid+ ')"><i class=" glyphicon glyphicon-pencil"></i></button>';
                        str += '<button type="button"  '+(clazz.cstate!="已结课"?'':'disabled')+' title="删除班级" class="btn btn-danger btn-xs" onclick="deleteClassByCid(' + clazz.cid+ ')"><i class=" glyphicon glyphicon-remove"></i></button>';
                        str += "</td>";
                        str += "</tr>";
                    });
                    $("#tbody").html(str);
                    var pageStr = "";
                    pageStr += '<li class="' + (data.pageBean.currentPage == 1 ? 'disabled' : '') + '"><a href="#" onclick="showList(' + (1) + ')">首页</a></li>';

                    pageStr += '<li class="' + (data.pageBean.currentPage == 1 ? 'disabled' : '') + '"><a href="#" onclick="showList(' + (data.pageBean.currentPage - 1) + ')">上一页</a></li>';
                    for (var i = 1; i <= data.pageBean.countPage; i++) {
                        pageStr += '<li class="' + (data.pageBean.currentPage == i ? 'active' : '') + '"><a href="#" onclick="showList(' + i + ')">' + i + '<span class="sr-only">(current)</span></a></li>';
                    }
                    pageStr += '<li class="' + (data.pageBean.currentPage == data.pageBean.countPage? 'disabled' : '') + '"><a href="#" onclick="showList(' + (data.pageBean.currentPage==data.pageBean.countPage?data.pageBean.currentPage:data.pageBean.currentPage + 1) + ')">下一页</a></li>';
                    pageStr += '<li class="' + (data.pageBean.currentPage == data.pageBean.countPage? 'disabled' : '') + '"><a href="#" onclick="showList(' + (data.pageBean.countPage) + ')">末页</a></li>';

                    $("#byPage").html(pageStr);
                } else {
                    layer.msg("数据加载失败", {time: 1000, icon: 5, shift: 6}, function () {
                    });
                }
            }
        });
    }

</script>
</body>
</html>